<template>
  <div class="mapbj">
    <img src="@/assets/img/home/ouhai.png" usemap="#Map" border="0" style="width: 44.3125rem; height: 33.0625rem;" />
    <map name="Map" id="Map">
      <!-- 泽雅镇 -->
      <div class="zeya map_icon" @click="switchMaptwo(1, '泽雅镇','330304108000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="65,11,86,14,111,23,130,12,158,6,182,11,185,23,196,47,220,43,226,52,226,86,214,118,220,127,280,112,314,115,326,135,356,141,362,153,358,168,364,185,352,200,333,203,330,212,327,253,291,257,281,270,281,293,252,300,236,302,213,317,195,312,177,307,171,329,152,323,89,260,63,256,19,243,11,227,24,204,33,175,47,164,40,132,59,104,88,104,99,103,79,63,76,41,62,30"
        />
      </div>
      <!-- 瞿溪街道 -->
      <div class="quxi map_icon" @click="switchMaptwo(2, '瞿溪街道','330304008000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="314,332,316,347,326,366,348,370,376,374,396,361,419,354,455,347,464,333,453,324,438,313,438,300,450,272,433,253,428,235,414,218,412,184,394,165,363,165,365,184,358,201,343,207,333,208,326,257,312,259,291,264,287,282,279,298,257,305,259,309,292,323,309,320"
        />
      </div>
      <!-- 郭溪街道 -->
      <div class="guoxi map_icon" @click="switchMaptwo(3, '郭溪街道','330304009000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="415,183,446,182,469,176,517,251,530,256,555,260,567,274,566,291,555,293,518,306,498,305,484,299,470,310,460,324,446,317,438,315,441,301,453,283,449,268,442,260,432,246,419,221"
        />
      </div>
      <!-- 潘桥街道 -->
      <div class="panqiao map_icon" @click="switchMaptwo(4, '潘桥街道','330304010000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="324,373,299,385,302,403,339,413,344,432,359,444,372,445,389,462,404,482,433,493,455,480,492,490,515,479,527,466,543,446,556,438,564,428,558,416,548,410,529,401,516,393,515,373,520,350,521,326,510,313,500,313,484,309,466,324,463,333,466,341,454,355,437,360,405,367,390,372,377,380,357,380,336,377"
        />
      </div>
      <!-- 娄桥街道 -->
      <div class="louqiao map_icon" @click="switchMaptwo(5, '娄桥街道','330304005000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="564,412,573,400,597,402,617,386,622,363,619,344,612,339,599,343,590,323,581,322,563,344,561,313,551,296,520,310,518,333,513,364,517,389,536,402,549,404"
        />
      </div>
      <!-- 新桥街道 -->
      <div class="xinqiao map_icon" @click="switchMaptwo(6, '新桥街道','330304006000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="554,299,566,312,565,338,582,322,601,340,613,341,619,342,631,335,627,321,630,310,622,301,624,272,615,267,598,257,582,255,565,263,570,277,564,284,560,293"
        />
      </div>
      <!-- 景山街道 -->
      <div class="jingshan map_icon" @click="switchMaptwo(7, '景山街道','330304001000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area shape="poly" coords="599,249,623,272,630,253,619,239,606,240" />
      </div>
      <!-- 梧田街道 -->
      <div class="wutian map_icon" @click="switchMaptwo(8, '梧田街道','330304002000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="633,330,648,336,650,316,675,307,689,300,698,315,724,321,738,328,740,340,717,351,720,360,688,369,683,357,678,362,675,384,655,392,651,403,649,425,640,420,622,429,602,426,568,421,566,413,572,399,588,404,610,397,618,381,622,358,619,347"
        />
      </div>
      <!-- 丽岙街道 -->
      <div class="lidai map_icon" @click="switchMaptwo(9, '丽岙街道','330304011000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="566,423,559,434,545,442,527,467,514,477,525,489,541,502,533,518,542,530,551,544,542,561,555,559,573,556,580,560,599,535,604,519,633,528,641,513,647,507,651,490,651,482,666,482,666,467,662,457,653,437,645,423,622,429,594,426"
        />
      </div>
      <!-- 仙岩街道 -->
      <div class="xianyan map_icon" @click="switchMaptwo(10, '仙岩街道','330304012000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="669,485,679,495,697,510,730,518,768,514,793,516,762,531,767,539,788,557,780,568,764,567,708,557,664,595,623,597,599,597,585,577,561,578,538,591,526,584,535,570,549,560,574,559,581,559,592,545,598,528,610,524,622,525,636,531,638,517,652,503,652,495,652,486,661,484"
        />
      </div>
      <!-- 南白象街道 -->
      <div class="nanbaixiang map_icon" @click="switchMaptwo(11, '南白象街道','330304003000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="659,452,676,452,694,459,713,440,727,422,724,408,695,388,711,377,725,377,727,367,720,365,710,369,686,369,684,366,679,360,676,380,677,393,664,391,658,391,649,412,649,422,650,433"
        />
      </div>
      <!-- 三垟街道 -->
      <div class="sanyang map_icon" @click="switchMaptwo(12, '三垟街道','330304007000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="736,317,748,314,768,319,786,327,792,346,791,369,772,381,771,390,776,402,762,417,747,421,729,416,725,405,712,394,703,387,713,380,726,380,733,370,726,363,723,355,727,346,744,346,739,331"
        />
      </div>
      <!-- 茶山街道 -->
      <div class="chashan map_icon" @click="switchMaptwo(13, '茶山街道','330304004000')">
        <p class="font_w4 font_s20">
          0
          <span>位</span>
        </p>
        <area
          shape="poly"
          coords="781,404,796,416,814,419,826,446,819,469,820,500,813,530,824,546,821,559,787,559,778,546,770,537,767,530,791,521,793,513,772,513,741,508,724,512,683,498,672,483,669,471,665,456,675,455,695,461,708,452,718,435,728,423,729,421,738,422,749,426,768,417,776,405"
        />
      </div>
    </map>
  </div>
</template>

<script>
export default {
  name: 'MapOuHai',

  data () {
    return {
      qxname: '瓯海区',
      category: false,
      isActive: 1,
      cityThreeType: '8',
      cityThreeTitle: '',
      Hqlrsl: [],
      qxcode: '330304000000'
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 12.获取老人数量(会按照地区自动分类
      this.$http.post(this.$api.Hqlrsl.hqlrsl, this.qxcode, true).then(result => {
        let arr = result.data.response.countTotalRegionDoctor
        // console.log('12.获取老人数量(会按照地区自动分类)', arr);
        for (let val of arr.values()) {
          this.Hqlrsl.push(val.num)
        }
      })
    },
    switchMaptwo (cityThreeType, cityThreeName, cityThreeJdCode) {
      var _this = this
      setTimeout(function () {
        console.log('cityThreeType(Map)' + cityThreeType)
        console.log('cityThreeName(Map)' + cityThreeName)
        _this.$router.push({
          path: '/AreaThreeComponents',
          name: 'AreaThreeComponents',
          query: {
            key: 'key',
            cityThreeTypeKey: cityThreeType,
            cityThreeTitleKey: cityThreeName,
            cityThreeJdCodeKey: cityThreeJdCode,
            cityThreeQxcodeKey: _this.qxcode,
            cityThreeQxnameKey: _this.qxname

          }
        })
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
//地图
.mapbj {
  position: absolute;
  top: 1.5%;
  left: 30%;
  //地图点
  .map_icon {
    color: #214494;
    font-style: italic;:hover{color: #fff;
font-size: 1.375rem; }
    width: 7rem;
    height: 7rem;
    line-height: 2.4rem;
    text-align: center;
    background: url(../../../assets/img/home/2.png) no-repeat center;
    background-size: 100% 100%;
  }
}
.zeya {
  position: absolute;
  top: 11%;
  left: 16%;
}
.quxi {
  position: absolute;
  top: 21%;
  left: 36%;
}
.guoxi {
  position: absolute;
  top: 28%;
  left: 50%;
}
.jingshan {
  position: absolute;
  top: 24%;
  left: 65%;
}
.xinqiao {
  position: absolute;
  top: 34%;
  left: 64%;
}
.louqiao {
  position: absolute;
  top: 45%;
  left: 59%;
}
.panqiao {
  position: absolute;
  top: 50%;
  left: 40%;
}
.lidai {
  position: absolute;
  top: 63%;
  left: 60%;
}
.wutian {
  position: absolute;
  top: 42%;
  left: 71%;
}
.sanyang {
  position: absolute;
  top: 36%;
  left: 82%;
}
.nanbaixiang {
  position: absolute;
  top: 52%;
  left: 73%;
}
.chashan {
  position: absolute;
  top: 61%;
  left: 82%;
}
.xianyan {
  position: absolute;
  top: 76%;
  left: 69%;
}
</style>
